<template>
	<view class="edit-content" :style="{
          transform: systemInfo.model === 'XD-SDD27-2201' || systemInfo.model === `iPhone 5`
            ? 'scale(1) translateY(-10.75rpx)' 
            : 'scale(1.333) translateY(93.75rpx)'
        }">
		<image class="bg-image" :src="bottomMaterialUrl" mode="aspectFit"></image>
		<view class="decorate-content">
			<image class="bg-image" mode="aspectFit" @click="setFocus()"></image>
			<move-view v-for="(item,index) of decorateList" :key="item.sortId" class="move-view" ref="decorateMoveBox"
				:h="item.height" :w="item.width" :x="item.x" :z="item.index" :y="item.y" :sx="item.scaleX"
				:sy="item.scaleY" :rotate="item.rotationAngle" :overturn="item.overturn" :focus="focusData.sortId == item.sortId"
				@change="getTransform">
				<image class="image" mode="aspectFit" :src="item.imageUrl" @click="setFocus(item.sortId)"></image>
			</move-view>
		</view>
		<image class="sku-image" :src="topMaterialUrl" mode="aspectFit"></image>
		<!-- 图片focus操作区 -->
		<move-view :h="focusData.h" :w="focusData.w" :x="focusData.x" :z="999" :y="focusData.y" :sx="Math.abs(focusData.sx)"
			:sy="focusData.sy" :rotate="focusData.r" :focus="true" @change="getTransform">
			<view class="focus-box" @click.stop="setFocus()">
				<view class="operation remove" @click.stop="remove"
					:style="{transform:`scale(${1/Math.abs(focusData.sx)})`}" v-if="focusIndex!=-1">
					×
				</view>
				<view class="operation add" @click.stop="copy" :style="{transform:`scale(${1/Math.abs(focusData.sx)})`}"
					v-if="focusIndex!=-1&&!focusData.background">
					+1
				</view>
				<view class="operation overturn" @click.stop="overturn" :style="{transform:`scale(${1/Math.abs(focusData.sx)})`}">
					<image class="image" src="@/static/images/icon/overturn.png" mode="aspectFit"></image>
				</view>
				
				<!-- 缩放 -->
				<view class="operation zoom" @touchstart.stop="zoomStart" @touchmove.stop="zoom"
					@touchend.stop="zoomEnd" :style="{transform:`scale(${1/Math.abs(focusData.sx)})`}">
					<image class="image" src="@/static/images/icon/zoom.png" mode="aspectFit"></image>
				</view>
				<!-- 旋转 -->
				<view class="operation rotate" @click.stop="rotate" @touchstart.stop="rotateStart"
					@touchmove.stop="rotate" @touchend="rotateEnd"
					:style="{transform:`scale(${1/Math.abs(focusData.sx)})`}">
					<image class="image" src="@/static/images/icon/rotate.png" mode="aspectFit"></image>
				</view>
				<view class="operation_center" id="focusCenter"></view>
			</view>

		</move-view>
	</view>
</template>

<script>
	import {
		resolution,
	} from "@/utils/utils.js";
	import index from '../../../uni_modules/uview-ui';
	import moveView from '@/pages/diy/components/move-view/move-view.vue'
	export default {
		components: {
			moveView,
		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
			max: {
				type: Number,
				default: 3
			},
			topMaterialUrl: {
				type: String,
				default: ''
			},
			bottomMaterialUrl: {
				type: String,
				default: ''
			},
		},
		watch: {
			list: {
				handler(newVal, oldVal) {
					newVal.forEach((item) => {
						let index = this.decorateList.findIndex((i) => {
							return i.sortId == item.sortId
						})
						if (index == -1) {
							this.decorateList.push(item)
							this.setFocus(item.sortId)
						} else {
							this.decorateList[index].index = item.index
						}
					});
					this.decorateList = this.decorateList.filter(item => {
						let index = newVal.findIndex((i) => {
							return i.sortId == item.sortId
						})
						return index != -1
					})

					// uni.$u.debounce(() => {
					// 	console.log('进行了操作');
					// 	this.$emit('writeHistory',this.decorateList)
					// })
				},
				deep: true,
				immediate: true // 这将使得回调在组件初始化时立即执行一次
			}
		},
		data() {
			return {
				systemInfo: {},
				// 配饰图列表
				decorateList: this.list,
				focusData: {
					sortId: null,
					id: null,
					h: 0,
					w: 0,
					x: -100,
					y: -100,
					sx: 1,
					sy: 1,
					r: 0
				},
				focusIndex: null,
				startTouches: [],
			}
		},
		methods: {
			// 设置焦点
			setFocus(sortId) {
				let index = this.decorateList.findIndex(item => {
					return item.sortId == sortId && sortId != undefined
				})
				if (index == undefined || index == -1) {
					this.focusData = {
						sortId: null,
						id: null,
						h: 1,
						w: 1,
						x: -1000,
						y: -1000,
						sx: 1,
						sy: 1,
						r: 0
					}
					this.$parent.decorateType = null
					this.$parent.isFocus = false
					return
				}
				this.$parent.isFocus = true
				this.focusIndex = index
				const obj = this.decorateList[index]
				this.focusData = {
					background: obj.background,
					type: obj.type,
					sortId: obj.sortId,
					id: obj.id,
					h: obj.height,
					w: obj.width,
					x: obj.x,
					y: obj.y,
					sx: obj.scaleX,
					sy: obj.scaleY,
					r: obj.rotationAngle
				}
			},

			// 得到图片操作的位置信息
			getTransform(data) {
				this.focusData.x = data.x
				this.focusData.y = data.y
				this.focusData.sx = data.sx
				this.focusData.sy = data.sy
				this.focusData.r = data.r

				this.decorateList[this.focusIndex].x = data.x
				this.decorateList[this.focusIndex].y = data.y
				this.decorateList[this.focusIndex].scaleX = data.sx
				this.decorateList[this.focusIndex].scaleY = data.sy
				this.decorateList[this.focusIndex].rotationAngle = data.r
				this.decorateList[this.focusIndex].overturn = data.overturn
				uni.$u.debounce(() => {
					this.$emit('changeDecorate', this.decorateList)
					console.log('进行了操作');
				})
			},
			// 复制
			copy() {
				let newDecorate = JSON.parse(JSON.stringify(this.decorateList[this.focusIndex]))
				newDecorate.x = 500 - this.decorateList[this.focusIndex].width / 2
				newDecorate.y = 500 - this.decorateList[this.focusIndex].height / 2
				// newDecorate.rotate = 0
				this.$emit('copyDecorate', newDecorate)
			},
			// 翻转
			overturn() {
				this.$refs.decorateMoveBox[this.focusIndex].setOverturn()
				// this.$refs.mainImage.sendChange()
			
			},
			// 删除
			remove() {
				this.$emit('removeDecorate', this.focusData.sortId)
			},
			// 旋转
			rotateStart(e) {
				uni.createSelectorQuery().in(this)
					.select('#focusCenter')
					.boundingClientRect(rect => {
						if (rect) {
							this.startTouches = [{
								pageX: rect.left,
								pageY: rect.top
							}, e.touches[0]]
						}
					})
					.exec();
			},
			rotate(e) {
				let newTouches = [
					this.startTouches[0], e.touches[0]
				]
				let rotate;
				rotate = this.$refs.decorateMoveBox[this.focusIndex].rotateFun(newTouches, this.startTouches, this
					.decorateList[this.focusIndex]
					.rotationAngle)
				this.focusData.r = rotate
			},
			rotateEnd(e) {
				this.$refs.decorateMoveBox[this.focusIndex].sendChange()
				this.$refs.decorateMoveBox[this.focusIndex].touchEnd()

			},


			// 缩放
			zoomStart(e) {
				uni.createSelectorQuery().in(this)
					.select('#focusCenter')
					.boundingClientRect(rect => {
						if (rect) {
							let eve = {
								touches: [{
										pageX: rect.left,
										pageY: rect.top
									},
									e.touches[0]
								]
							}
							this.$refs.decorateMoveBox[this.focusIndex].touchStart(eve)

						}
					})
					.exec();
			},
			zoom(e) {
				uni.createSelectorQuery().in(this)
					.select('#focusCenter')
					.boundingClientRect(rect => {
						if (rect) {
							let eve = {
								touches: [{
										pageX: rect.left,
										pageY: rect.top
									},
									e.touches[0]
								],
								canRotate: false
							}
							this.$refs.decorateMoveBox[this.focusIndex].touchMove(eve, 'justScale')
						}
					})
					.exec();
			},
			zoomEnd() {
				this.$refs.decorateMoveBox[this.focusIndex].sendChange()
				// uni.$u.debounce(() => {
				// 	console.log('进行了操作');
				// 	this.$emit('writeHistory',this.decorateList)
				// })

			},
			// 位置微调
			translate(x, y) {
				this.$refs.decorateMoveBox[this.focusIndex].translate(x, y)
			},

		},
		beforeDestroy() {
			this.$emit('saveDecorate', this.decorateList)
		},
		mounted() {
			// this.decorateList = this.list
			this.systemInfo = resolution()
		}
	}
</script>
<style lang="scss">
	.edit-content {
		height: 750rpx;
		width: 750rpx;
		position: relative;
		// transform: scale(1.333) translateY(93.75rpx);
		// transform: scale(1) translateY(-10.75rpx);
		overflow: hidden;
		.bg-image,
		.sku-image,
		.decorate-content {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.sku-image {
			pointer-events: none;
			z-index: 99;
		}

		.decorate-content {
			// background-image: url('/static/images/icon/1.jpg');
			// background-size: 17px;
			// background-color: #000000cf;
			// background-blend-mode: color-burn;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.focus-box {
			border: 2rpx dashed #333333;
			// pointer-events: none;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 98;
			height: 100%;
			width: 100%;
		}

		.operation {
			height: 40rpx;
			width: 40rpx;
			border-radius: 50%;
			background-color: #fff;
			position: absolute;
			box-shadow: 0 0 6rpx 0 #333;
			padding: 8rpx;
			pointer-events: auto;

			&.remove {
				top: -20rpx;
				left: -20rpx;
				line-height: 40rpx;
				text-align: center;
				padding: 0;
				font-size: 25rpx;
				color: #666;
			}

			&.rotate {
				top: -20rpx;
				right: -20rpx;
			}

			&.add {
				bottom: -20rpx;
				// left: -20rpx;
				left: 45%;
				transform: translateX(-45%);
				line-height: 40rpx;
				text-align: center;
				padding: 0;
				font-size: 20rpx;
				color: #666;
			}
			&.overturn {
				bottom: -20rpx;
				left: -20rpx;
				line-height: 40rpx;
				text-align: center;
				padding: 0rpx 0rpx 6rpx;
				font-size: 20rpx;
				color: #666;
			}
			&.zoom {
				bottom: -20rpx;
				right: -20rpx;
				padding: 5rpx 11rpx;
			}

			.image {
				height: 100%;
				width: 100%;
			}
		}

		.operation_center {
			position: absolute;
			top: 50%;
			left: 50%;
		}
	}
</style>